<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>同级组件数据传递</title>
	<!-- <script src="https://unpkg.com/vue@next"></script> -->
	<script src="js/vue.global.js"></script>
	<link rel="stylesheet" href="css/com.css">
</head>
<body>
<div id="app">
	<component-a @getverify="getdata"></component-a>
	<component-b :code4="code"></component-b>
</div>

</body>
<script>
const app = Vue.createApp({
	data() {
		return {
			code: 9527,
			verify: ['a4j9', 'ht8u', '1gie', '93u3']
		}
	},
	components:{
		'component-a':{
			data:function(){
				return {
					arr: [0, 1, 2, 3],
				};
			},
			
			//创建一个模块，模板哟昂定义时间
			template: `<button @click="change">换一张</button>`,
			//组件方法
			methods:{
				change:function(){
					this.$emit('getverify', this.arr);
				}
			}
		},
		'component-b':{
			props:['code4'],
			//创建一个模块，模板哟昂定义时间
			template: `<p>{{code4}}</p>`,
		},
	},
	//实例事件
	methods:{
		getdata:function(arr){
			// console.log(arr)
			let n = arr[Math.floor(Math.random() * arr.length)];
			this.code = this.verify[n];
		},
	}
});

let vm1 = app.mount('#app');
// console.log(vm1);
</script>
</html>